<template>
  <div>
    <a-modal
      v-model:open="visibleModal"
      centered
      width="600px"
      :title="props.title"
      :mask-closable="false"
      :body-style="{ 'padding-bottom': '0' }"
      destroy-on-close
      @ok="onOk"
      @cancel="onCancel"
    >
      <a-spin :spinning="isLoading" tip="数据加载中">
        <p class="pb-28">最多可选择{{ props.maxTagNum }}个标签</p>
        <a-checkbox-group :value="checkedTagList" style="width: 100%" :max="3" @change="onChange">
          <a-row :gutter="[16, 30]">
            <a-col v-for="item in tagList" :key="item.label as string" :span="6">
              <a-checkbox :value="item.value" :disabled="item.disabled">
                <div class="label elliptical-1" :title="item.label">{{ item.label }}</div>
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-spin>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { CheckboxOptionType } from 'ant-design-vue'
  import { cloneDeep } from 'g6-fn'
  import { ref } from 'vue'
  export interface TagModalProps {
    title?: string
    maxTagNum?: number
    checkedList?: any[]
    checkedLabelList?: any[]
  }
  const props = withDefaults(defineProps<TagModalProps>(), {
    title: '请选择标签',
    maxTagNum: 3
  })
  const emits = defineEmits(['ok', 'cancel', 'update:checkedList', 'update:checkedLabelList'])

  const checkedTagList = ref(props.checkedList)
  const checkedTagLabelList = ref([])
  /* TODO:标签列表 */
  const tagList = ref<CheckboxOptionType[]>([])
  const tagListInit = cloneDeep(tagList.value)
  const isLoading = ref(false)

  /* TODO:标签change事件 */
  const onChange = (checkedValue: any[]) => {
    checkedNumControl(checkedValue)
  }

  // 控制标签数量
  const checkedNumControl = (checkedValue: any[] = []) => {
    const maxTag = props.maxTagNum // 最大标签数
    let result: CheckboxOptionType[] = []
    if (checkedValue.length < maxTag) {
      result = tagList.value.map(item => {
        return { ...item, disabled: false }
      })
    } else {
      result = tagList.value.map(item => {
        if (!checkedValue.includes(item.value)) {
          return { ...item, disabled: true }
        }
        return item
      })
    }
    const checkedLabelList = checkedValue.reduce((prev, item) => {
      prev.push(tagList.value.find(e => e.value === item))
      return prev
    }, [])
    checkedTagLabelList.value = checkedLabelList
    checkedTagList.value = checkedValue
    tagList.value = result
  }

  /* TODO:确认选择 */
  const onOk = () => {
    visibleModal.value = false
    emits('update:checkedList', checkedTagList.value)
    emits('update:checkedLabelList', checkedTagLabelList.value)
    emits('ok', checkedTagList.value, checkedTagLabelList.value)
    tagList.value = tagListInit
  }

  /* TODO:取消选择 */
  const onCancel = () => {
    visibleModal.value = false
    emits('cancel', checkedTagList.value, checkedTagLabelList.value)
  }
  const visibleModal = ref(false)
  const openModal = (list: any[]) => {
    visibleModal.value = true
    tagList.value = list
    checkedNumControl(props.checkedList!)
  }

  const closeModal = () => {
    onCancel()
  }

  defineExpose({
    open: openModal,
    close: closeModal
  })
</script>

<style lang="less" scoped>
  .my-a-form {
    margin: 0 16px;

    .on-line-two-item {
      display: flex;
      justify-content: space-between;

      .ant-form-item {
        width: 248px;
      }
    }

    .ant-form-item {
      margin-bottom: 40px;
      // 调整表单项间距之后，需考虑到出现错误提示的字段的高度，为24px
      &.ant-form-item-with-help {
        margin-bottom: 16px;
      }

      .ant-input {
        min-height: 38px;
      }
    }

    .ant-form-item:last-of-type {
      margin-bottom: 0;
    }
  }

  :deep(.ant-checkbox-wrapper) {
    word-break: break-word;
  }

  .label {
    overflow: hidden;
    width: 90px;
  }
</style>
